<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>关于VueComponent</title>
</head>
<script type="text/javascript" src="../js/vue.js"></script>
    <!--
        关于VueComponent：
            1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的；

            2.我们只需要写<school/> 或 <school></school>，Vue解析时会帮我们创建school组件的实例对象，
            即Vue帮我们执行的：new VueComponent({options})。

            3.特别注意：每次调用Vue.extend（不调用直接定义组件也一样），返回的都是一个全新的VueComponent！！！

            4.关于this指向：
                1.组件配置中：
                    data函数、methods中的函数，watch中的函数、computed中的函数，它们的this均是【VueComponent实例对象】；
                2.new Vue({options})配置中：
                    data函数、methods中的函数，watch中的函数、computed中的函数，它们的this均是【Vue实例对象】；
            
            5.VueComponent的实例对象，以后简称vc（也可以称为：组件实例对象）；
              Vue的实例对象，简称vm。
    -->
    <body>
        <div id="root">
            <school></school>
            <hello></hello>
        </div>
    </body>

        <script type="text/javascript">
            Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。
            
            //定义school组件
            const school = Vue.extend({
                template:`
                <div>
                    <h2>学校名称：{{schoolName}}</h2>
                    <h2>学校地址：{{schoolAddress}}</h2>
                    <hr/>
                </div>
                `,
                data(){
                    return{
                        schoolName:'广西科技师范学院',
                        schoolAddress:'广西省来宾市铁北大道966号'
                    }
                }
            });

            //定义test组件（hello的子组件）
            const test = Vue.extend({
                template:`<span>欢迎学习Vue~！</span>`
            });

            //定义hello组件
            const hello = Vue.extend({
                template:`
                <div>
                    <h1>你好啊！{{name}}</h1>
                    <hr/>
                    <test></test>
                </div>
                `,
                data(){
                    return {
                        name:'小宝'
                    }
                },
                components:{test:test}
            });

            //创建vm
            const vm = new Vue({
                el:'#root',
                components:{hello:hello,school:school}
            })

        </script>
    
</html>